<template>
<el-row type="flex" justify="center">
    <el-col>
      <el-form :model="planForm">
        <div class="one-row">
          <div class="one-row-title">业主单位：</div>
          <div class="one-row-content">{{planForm.orgName || '-'}}</div>
        </div>
        <div class="one-row">
          <div class="one-row-title">预案名称：</div>
          <div class="one-row-content">{{planForm.name || '-'}}</div>
        </div>
        <div class="one-row">
          <div class="one-row-title">等级：</div>
          <div class="one-row-content">{{planForm.levelName || '-'}}</div>
        </div>
        <div class="one-row">
          <div class="one-row-title">类型：</div>
          <div class="one-row-content">{{planForm.typeName || '-'}}</div>
        </div>
        <div class="one-row">
          <div class="one-row-title">创建人：</div>
          <div class="one-row-content">{{planForm.createName || '-'}}</div>
        </div>
        <div class="one-row">
          <div class="one-row-title">创建时间：</div>
          <div class="one-row-content">{{planForm.createTime || '-'}}</div>
        </div>
        <div class="one-row">
          <div class="one-row-title">应急人员：</div>
          <div class="one-row-content">
            <template v-if="planForm.members && planForm.members.length>0">
              <div v-for="(item, i) in planForm.members" :key="i"><span>{{item.groupName}}</span><span>{{item.dutyName}}</span><span>{{item.tel}}</span></div>
            </template>
          </div>
        </div>
        <div class="one-row">
          <div class="one-row-title">处理流程：</div>
          <div class="one-row-content"  v-html="planForm.flowContent || '-'"></div>
        </div>
        <div class="one-row">
          <div class="one-row-title">现场指挥小组分工：</div>
          <div class="one-row-content"  v-html="planForm.leaderTaskContent || '-'"></div>
        </div>
        <div class="one-row">
          <div class="one-row-title">信息传导分工：</div>
          <div class="one-row-content"  v-html="planForm.conductionTaskContent || '-'"></div>
        </div>
        <div class="one-row">
          <div class="one-row-title">灭火战斗小组分工：</div>
          <div class="one-row-content"  v-html="planForm.battleTaskContent || '-'"></div>
        </div>
        <div class="one-row">
          <div class="one-row-title">引导疏散小组分工：</div>
          <div class="one-row-content"  v-html="planForm.evacuateTaskContent || '-'"></div>
        </div>
        <div class="one-row">
          <div class="one-row-title">安全警戒小组分工：</div>
          <div class="one-row-content"  v-html="planForm.safetyalertTaskContent || '-'"></div>
        </div>
        <div class="one-row">
          <div class="one-row-title">后勤救护小组分工：</div>
          <div class="one-row-content"  v-html="planForm.logisticsTaskContent || '-'"></div>
        </div>
        <div class="one-row">
          <div class="one-row-title">其他小组分工：</div>
          <div class="one-row-content"  v-html="planForm.taskContent || '-'"></div>
        </div>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>

export default {
    name: 'PlanDetail',
    props: {
      planForm: {
        type: Object
      },
    },
    data(){
      return {
        
      }
    },
    created() {
    }
  }
</script>
<style lang="scss" scoped>
.one-row{    
  display: flex;
  line-height: 50px;
  width: 100%;
  min-height: 50px;
  .one-row-title{
    float: left;
    font-weight: bold;
    min-width: 90px;
    text-align: right;
  }
  .one-row-content{
    float: left;
    padding-left: 10px;
    span{
      padding: 0 5px;
    }
  }
}
</style>
<style lang="scss" >
.one-row-content{
  img {
      max-width: 300px;
      max-height: 300px;
  }
}
</style>